import axios from "axios";
import config from "./../config/config.js"

import {
    ElMessage
} from 'element-plus'

import {
    useRouter
} from "vue-router"

import store from './../vuex/store.js'

const service = axios.create({
    baseURL: config.baseApi, //后端接口的地址
    timeout: 5000 //超时时间
})

//对请求进行拦截
service.interceptors.request.use(req => {
    //获得请求头
    const headers = req.headers;
    //如果当前请求的后台接口不是登录,在请求头添加令牌
    if (req.url != "/users/login") {
        headers.token = store.state.userInfo.token
    }
    return req
})

//对响应信息进行拦截
service.interceptors.response.use(res => {
    let {
        code,
        data,
        message
    } = res.data

    if (code == 200) {
        return data
    } else {
        const router = useRouter()
        ElMessage.error(message)
        return Promise.reject(message)
    }
})

//在axios中 get请求的参数应该是放在params中  post请求的参数应该是放在data中
function request(options) {
    //如果用户发送请求时没有指定请求方式,默认为get请求
    options.method = options.method || 'get'
    //判断请求方式如果是get方式
    if (options.method.toLowerCase === 'get') {
        //因为在axios中 get请求的参数应该是放在params中  post请求的参数应该是放在data中
        //将data中的参数放到params中
        options.params = options.data
    }
    //如果环境使用的生产环境
    if (config.env === 'prod') {
        //一定不能使用mockApi必须使用baseApi 
        service.defaults.baseURL = config.baseApi
    } else {
        //如果不是生产环境根据是否使用mock来决定是否使用mockApi
        service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi
    }
    //使用axios的service方法发送请求
    return service(options)
}

["get", "post", "put", "delete", "patch"].forEach(item => { //遍历数组
    // request[item]
    // reququest对象添加属性,属性名是item(数组的每个元素)
    // 对象中的每个属性都是一个函数 函数中需要传递参数(url,data,options)
    request[item] = (url, data, options) => {
        //调用上面封装好的request函数发送请求
        return request({
            url,
            method: item,
            data,
            ...options
        })
    }
})

export default request